<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人简历</title>
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="self">
                        <div class="container">
                            <!--  <nav class="navbar navbar-expand-lg navbar-light bg-ligh">
                                <a class="navbar-brand" href="#" style="color: #A7E615;">Yang Li Feng</a>
                                <div class="zz">
                                    <div class="navbar-nav">
                                        <a class="nav-item nav-link active" href="#one">基本资料</a>
                                        <a class="nav-item nav-link active" href="#two">专业技能</a>
                                        <a class="nav-item nav-link active" href="#three">工作经历</a>
                                        <a class="nav-item nav-link active" href="#four">项目经验</a>
                                        <a class="nav-item nav-link active" href="#five">自我评价</a>
                                    </div>
                                </div>
                            </nav> -->


                            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                                <a class="navbar-brand" href="#" style="color: #A7E615;">Yang Li Feng</a>
                                <button class="navbar-toggler" type="button" data-toggle="collapse"
                                    data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                                    aria-label="Toggle navigation">
                                    <span class="navbar-toggler-icon"></span>
                                </button>
                                <div class="collapse navbar-collapse" id="navbarNav">
                                   <!--  <div class="zz">
                                            <ul class="navbar-nav">
                                                    <li class="nav-item active">
                                                      <a class="nav-link" href="#one">基本资料 <span class="sr-only">(current)</span></a>
                                                    </li>
                                                    <li class="nav-item">
                                                      <a class="nav-link" href="#two">专业技能</a>
                                                    </li>
                                                    <li class="nav-item">
                                                      <a class="nav-link" href="#three">工作经历</a>
                                                    </li>
                                                    <li class="nav-item">
                                                      <a class="nav-link" href="#four">项目经验</a>
                                                    </li>
                                                    <li class="nav-item">
                                                      <a class="nav-link " href="#five" tabindex="-1" aria-disabled="true">自我评价</a>
                                                    </li>
                                                  </ul>
                                      </div>
                                    </div> -->
                            </nav>






                        </div>
                    </div>
                    <div class="evening">
                        <div class="corner1">
                            <span class="hidd">前端工程师</span>
                            <span class="hidp">简历</span>
                            <p class="motto">爱技术，爱生活</p>
                            <a href="">
                                <!--  <span class="next"><i><img src="img/images/03.png" alt=""
                                            style="margin-top: 16px;"></i></span> -->
                            </a>
                        </div>
                        <div class="corner2">
                            <img src="img/1.png" alt="">
                        </div>
                        <div class="corner3">
                            <img src="img/3.png" alt="">
                        </div>
                        <div class="corner4">
                            <img src="img/2.png" alt="">
                        </div>
                        <div class="corner5">
                            <img src="img/4.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="swiper-slide" id="one">
                    <div class="tup">
                        <div class="container">
                            <h1>基本资料</h1>
                            <div class="row">
                                <div class="col-md-3 toux">
                                    <div class="card" style="width: 18rem;">
                                        <img src="img/page-1/glass.png" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title">基本信息</h5>
                                            <p class="card-text">
                                                姓名: 杨立峰 男
                                                <br>
                                                年龄: 21岁 籍贯：河北
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 toux">
                                    <div class="card" style="width: 18rem;">
                                        <img src="img/page-1/hat.png" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title">毕业院校</h5>
                                            <p class="card-text">河北泊头职业学院.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 toux">
                                    <div class="card" style="width: 18rem;">
                                        <img src="img/page-1/book.png" class="card-img-top" alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title">学历和专业</h5>
                                            <p class="card-text">
                                                前端 专科
                                                <br>
                                                专业技能 html css js jQuery </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 toux">
                                    <div class="card" style="width: 18rem;">
                                        <img src="img/page-1/tel.png" class="card-img-top" alt="..."
                                            style="height: 125px;width: 33%!important;">
                                        <div class="card-body">
                                            <h5 class="card-title">联系方式</h5>
                                            <p class="card-text">
                                                邮箱 1415523069@qq.com
                                                <br>
                                                电话 159xxxx7728</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide" id="two">
                    <div class="tr">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="card mb-12" style="">
                                        <div class="row no-gutters" style="margin-top: 50px;">
                                            <div class="col-md-1">
                                                <img src="img/page-2/tv8.png" class="card-img" alt="...">
                                            </div>
                                            <div class="col-md-11">
                                                <div class="card-body">
                                                    <h5 class="card-title">PC端</h5>
                                                    <p class="card-text">
                                                        熟练使用 Html5 Css3 JavaScript，能够合理完成web端或者移动端页面的编写和维护，
                                                        <br>
                                                        思路清晰，结构完整，易于维护和持久化开发，能处理主流浏览器兼容问题。
                                                        熟练使用原生js, 了解js面向对象原理，闭包以及原型结构，能够合理利用面向对象以及模块化开发,并且能适当完成框架封装。熟练使用
                                                        jQuery，并能完成相关项目。
                                                        <br>
                                                        熟悉animation fullpage jquery-ui template lazyload jQeasing
                                                        masonry等实用插件的应用,轮播图，tab栏，瀑布流，延迟加载，全屏滚动等等常用功能的实现
                                                        <br>
                                                        掌握 Ajax交互原理，根据后台接口能够合理完成前后台交互，数据的增删改查
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="card mb-12" style="">
                                        <div class="row no-gutters">
                                            <div class="col-md-1">
                                                <img src="img/page-2/apple6.png" class="card-img" alt="...">
                                            </div>
                                            <div class="col-md-11">
                                                <div class="card-body">
                                                    <h5 class="card-title">手机端</h5>
                                                    <p class="card-text">
                                                        熟练使用zepto.js，Frozen ui，Amaze ui等移动框架进行移动页面的开发
                                                        <br>
                                                        掌握 移动端编程，会基于流式布局以及 响应式布局 开发基于移动端的页面。
                                                        <br>
                                                        熟练使用Bootstrap 框架以及轻量级框架 zepto 的使用。
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="card mb-12" style="">
                                        <div class="row no-gutters">
                                            <div class="col-md-1">
                                                <img src="img/page-2/baterry10.png" class="card-img" alt="...">
                                                <!--                                                         <a href=""><img src="img/page-2/5(2).png" class="card-img" alt="..." style="width: 100%"></a>-->
                                            </div>
                                            <div class="col-md-11">
                                                <div class="card-body">
                                                    <h5 class="card-title">其他</h5>
                                                    <p class="card-text">
                                                        掌握 angularJS 框架原理，可以完成无需刷新的单页面应用
                                                        <br>
                                                        了解Node.js 的工作原理会使用npm、bower环境
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="ds">
                                </div>
                                <div class="dd">
                                </div>
                                <div class="col-md-12" style=" position: relative;">
                                    <span class="sub1">Zepto</span>
                                    <span class="sub2">Bootstrap</span>
                                    <span class="sub3">CANVAS</span>
                                    <span class="sub4">jQuery</span>
                                    <span class="sub5">Angular</span>
                                    <span class="sub6">移动端</span>
                                    <span class="sub7">CSS3</span>
                                    <span class="sub8">响应式</span>
                                    <span class="sub9">Nodejs</span>
                                    <span class="sub10">HTML5</span>
                                </div>
                                <div class="dz">
                                    <img src="img/page-2/5(2).png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide" id="three">
                    <div class="ty">
                        <span class="titlex">个人经历</span>
                        <span class="titles">热爱技术,专注用户体验 </span>
                        <div class="container">
                            <div class="row">
                                <div class="col-md-3 col-xs-6  zer">
                                    <div class="card" style="width: 18rem;">
                                        <img src="img/page-4/1.jpg" class="hh" alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title">河北泊头职业学院</h5>
                                            <p class="card-text">前端技术.</p>
                                            <p class="card-text">主要学习前端。</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-xs-6 zer">
                                    <div class="card" style="width: 18rem;">
                                        <img src="img/page-4/2.jpg" class="hh" alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title">泊头职业学院</h5>
                                            <p class="card-text">软件编程</p>
                                            <p class="card-text">主学前端</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-xs-6 zer">
                                    <div class="card" style="width: 18rem;">
                                        <img src="img/page-4/0df431adcbef760902138e6827dda3cc7cd99e28.png" class="hh"
                                            alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title">河北泊头职业学院</h5>
                                            <p class="card-text">前端工程师</p>
                                            <p class="card-text">网站开发，移动端开发。</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-xs-6 zer">
                                    <div class="card" style="width: 18rem;">
                                        <img src="img/page-4/a5c27d1ed21b0ef4980fe5a7d4c451da80cb3e67.png" class="hh"
                                            alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title">泊头职业学院</h5>
                                            <p class="card-text">web前端工程师</p>
                                            <p class="card-text">web页面的开发</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide" id="four">
                    <div class="kl">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-6 col-md-3 col-lg-3 sss">
                                    <div class="card" style="">
                                        <div class="ab">
                                            <div class="hover-text">
                                                <h4><a href="file:///E:/答辩网站/14/6-9/9.html">Food</a></h4>
                                                <small>技术：html+css+js</small>
                                            </div>
                                            <a href=""><img src="img/zi-zuo/Food.png" class="qz" alt="..."></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-3 sss">
                                    <div class="card" style="">
                                        <div class="ab">
                                            <div class="hover-text">
                                                <h4><a href="file:///E:/personal_blog/index.html">个人博客</a></h4>
                                                <small>技术：HTML+CSS+JQuery+Bootstrap</small>
                                            </div>
                                            <a href=""><img src="img/zi-zuo/杨立峰博客.png" class="qz" alt="..."></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-3 sss">
                                    <div class="card" style="">
                                        <div class="ab">
                                            <div class="hover-text">
                                                <h4><a
                                                        href="http://yanglifeng86.gitee.io/tianya_mingyue_knife/">天涯明月刀</a>
                                                </h4>
                                                <small>技术：HTML+CSS+JQuery+Bootstrap</small>
                                            </div>
                                            <a href=""><img src="img/zi-zuo/天涯明月刀.png" class="qz" alt="..."></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-3 sss">
                                    <div class="card" style="">
                                        <div class="ab">
                                            <div class="hover-text">
                                                <h4><a href="http://yanglifeng86.gitee.io/zaizhanjingdong/">京东</a></h4>
                                                <small>技术：HTML+CSS+JQuery+Bootstrap+js</small>
                                            </div>
                                            <a href=""><img src="img/zi-zuo/京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！.png"
                                                    class="qz" alt="..."></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-3 sss">
                                    <div class="card" style="">
                                        <div class="ab">
                                            <div class="hover-text">
                                                <h4><a href="http://yanglifeng86.gitee.io/taobao/">淘宝</a></h4>
                                                <small>技术：HTML+CSS+JQuery+Bootstrap+js</small>
                                            </div>
                                            <a href=""><img src="img/zi-zuo/淘宝网 - 淘！我喜欢.png" class="qz" alt="..."></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-3 sss">
                                    <div class="card" style="">
                                        <div class="ab">
                                            <div class="hover-text">
                                                <h4><a href="http://yanglifeng86.gitee.io/man_wei/">漫威</a></h4>
                                                <small>技术：HTML+CSS+JQuery+Bootstrap</small>
                                            </div>
                                            <a href=""><img src="img/zi-zuo/漫威.png" class="qz" alt="..."></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-3 sss">
                                    <div class="card" style="">
                                        <div class="ab">
                                            <div class="hover-text">
                                                <h4><a href="http://yanglifeng86.gitee.io/duitang/">堆糖</a></h4>
                                                <small>技术：HTML+CSS+JQuery+Bootstrap+js</small>
                                            </div>
                                            <a href=""><img src="img/zi-zuo/堆糖 - duitang.png" class="qz" alt="..."></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3 col-lg-3 sss">
                                    <div class="card" style="">
                                        <div class="ab">
                                            <div class="hover-text">
                                                <h4><a href="http://yanglifeng86.gitee.io/tengxunwang/">腾讯网</a></h4>
                                                <small>技术：HTML+CSS+JQuery+Bootstrap</small>
                                            </div>
                                            <a href=""><img src="img/zi-zuo/腾讯网 - tengxunwang.png" class="qz"
                                                    alt="..."></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide" id="five">
                    <div class="ll">
                        <div class="top" style="height: 30%;margin-bottom: 30px;"></div>
                        <div class="container">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="jumbotron jumbotron-fluid" style="">
                                        <div class="container">
                                            <h1 class="display-4">Focus Me</h1>
                                            <p class="lead">
                                                有责任，工作踏实，性格开朗乐观，积极上进。
                                            </p>
                                            <p class="lead">
                                                易和人相处，拥有良好的亲和力。
                                            </p>
                                            <p class="lead">
                                                喜欢js，非常热爱编程，喜欢钻研新的技术，
                                                <br>
                                                具有很强的自学能力和良好的学习方法，喜欢研究各种新的框架。
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="foot" style="height: 30%;"></div>
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        </div>
    </header>




    <script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>